<template>
  <div class="form-field" :class="{ 'van-hairline--bottom': border }">
    <div v-if="name" class="field-name">{{ name }}</div>
    <slot />
  </div>
</template>

<script>
  export default {
    props: {
      name: {
        type: String,
        default: ''
      },
      border: {
        type: Boolean,
        default: true
      }
    }
  };
</script>

<style scoped lang="less">
  .form-field {
    &:not(:first-child) {
      margin-top: 18px;
    }

    &::after {
      border-color: #e6e8ed;
    }

    /deep/ .van-cell {
      padding: 10px 0 8px;
    }
  }

  .field-name {
    font-size: 13px;
    color: #888;
  }
</style>
